<template>
  <view class="addEquipment_container">
    <view class="header">
      <view class="left"><uni-icons type="back" size="30" color="#ffb612" @click="back"></uni-icons></view>
      <view class="title">添加设备</view>
    </view>
    <view class="form">
      <uni-forms :modelValue="equipment" label-position="left" label-width="40" :rules="rules" ref="form">
        <uni-forms-item label="设备类型:" name="type">
          <uni-data-select
            emptyText="暂无对应设备类型"
            :clear="false"
            v-model="equipment.machineTypeName"
            :localdata="range"
            placeholder="设备类型选择"
            @change="changeEquipe(1)"
          ></uni-data-select>
          <!-- <input type="text" v-model="equipment.type" placeholder="请输入设备类型" @input="isChange(1)" /> -->
          <!--       <view class="content">
           <view class="search-info" v-for="(i, index) in testData" @click="select(i, 1)">{{ i }}</view>
         </view> -->
        </uni-forms-item>

        <uni-forms-item label="设备规格:" name="specifications">
          <!-- <input type="text" v-model="equipment.specifications" placeholder="请输入设备规格" @input="isChange(2)" /> -->
          <uni-data-select
            emptyText="暂无对应设备规格"
            :clear="false"
            v-model="equipment.specificationId"
            :localdata="range1"
            placeholder="设备规格选择"
            @change="changeEquipe(2)"
          ></uni-data-select>
          <!-- <view class="content">
           <view class="search-info" v-for="(i, index) in testData1" @click="select(i, 2)">{{ i }}</view>
         </view> -->
        </uni-forms-item>
        <uni-forms-item label="设备厂家:" name="name">
          <!-- <input type="text" v-model="equipment.name" placeholder="请输入设备名称" @input="isChange(3)" /> -->
          <uni-data-select
            :clear="false"
            v-model="equipment.manufacturerName"
            :localdata="range2"
            placeholder="设备厂家选择"
            @change="changeEquipe(3)"
            emptyText="暂无对应设备厂家"
          ></uni-data-select>
          <!-- <view class="content">
           <view class="search-info" v-for="(i, index) in testData2" @click="select(i, 3)">{{ i }}</view>
         </view> -->
        </uni-forms-item>
        <uni-forms-item label="设备型号:" name="model">
          <!-- <input type="text" v-model="equipment.model" placeholder="请输入设备型号" @input="isChange(4)" /> -->
          <uni-data-select
            :clear="false"
            v-model="equipment.modelNumber"
            :localdata="range3"
            placeholder="设备型号选择"
            @change="changeEquipe(4)"
            emptyText="暂无对应设备型号"
          ></uni-data-select>
          <!-- <view class="content">
           <view class="search-info" v-for="(i, index) in testData3" @click="select(i, 4)">{{ i }}</view>
         </view> -->
        </uni-forms-item>
        <uni-forms-item>
          <view class="submit"><button class="button" @click="submitForm">添加</button></view>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { getEquipeAllApi, getNameAllApi, getSpecificationsApi, getEquipmentInfoApi, addEquimentApi } from '@/api/equipment.js';
export default {
  data() {
    return {
      // 表单数据
      equipment: {
        machineTypeName: '',
        specificationId: '',
        manufacturerName: '',
        modelNumber: ''
      },
      range: [],
      range1: [],
      range2: [],
      range3: [],
      rules: {
        machineTypeName: {
          rules: [
            {
              required: true,
              errorMessage: '请填写类型'
            }
          ]
        },
        specificationId: {
          rules: [
            {
              required: true,
              errorMessage: '请填写规格'
            }
          ]
        },
        manufacturerName: {
          rules: [
            {
              required: true,
              errorMessage: '请填写名称'
            }
          ]
        },
        modelNumber: {
          rules: [
            {
              required: true,
              errorMessage: '请填写型号'
            }
          ]
        }
      }
    };
  },
  watch: {},
  onLoad() {
    this.init();
  },
  methods: {
    back() {
      uni.navigateTo({
        url: '/pages/equipment/equipment'
      });
    },
    async changeEquipe(v) {
      switch (v) {
        case 1:
          this.equipment.specificationId = '';
          this.equipment.manufacturerName = '';
          const { data } = await getSpecificationsApi(this.equipment.machineTypeName);
          this.range1 = data.data.map(i => {
            return {
              value: i.id,
              text: i.name
            };
          });
          break;
        case 2:
          break;
        case 3:
          this.getEquipmentInfo();
          break;
        case 4:
          break;
        default:
          break;
      }
    },

    /**     选择
     * @param {Object} i
     * @param {Object} index
     */
    select(i, index) {
      const box = document.querySelectorAll('.content');
      box[index - 1].style.display = 'none';
      this.seleceHandle(index, i);
    },
    init() {
      this.getEquipeAll();
      this.getNameAll();
    },
    async getEquipeAll() {
      const { data } = await getEquipeAllApi();
      this.range = data.data.map(i => {
        return { value: i.name, text: i.name };
      });
    },
    async getNameAll() {
      const { data } = await getNameAllApi();
      this.range2 = data.data.map(i => {
        return {
          value: i.name,
          text: i.name
        };
      });
    },
    async getEquipmentInfo() {
      const res = await getEquipmentInfoApi(this.equipment);
      if (res.data.code !== 200) {
        uni.showToast({
          title: '不存在该设备型号!',
          icon: 'error'
        });
      } else {
        this.range3 = res.data.data.map(i => {
          return { value: i.modelNumber, text: i.modelNumber };
        });
      }
    },
    async addEquiment(data) {
      try {
        const res = await addEquimentApi(data);

        if (res.data.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: res.data.message,
              icon: 'success'
            });
          }, 10);
          this.equipment = {};
          uni.$emit('loginSuccess', true);
          uni.navigateBack();
        }
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        uni.showToast({
          title: '设备已存在！',
          icon: 'error'
        });
      }
    },
    // 触发提交表单
    submitForm() {
      this.$refs.form
        .validate()
        .then(res => {
          this.addEquiment(this.equipment.modelNumber);
        })
        .catch(err => {
          console.log('表单错误信息：', err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.addEquipment_container {
  background-color: #333333;
  height: 100vh;

  .form {
    padding: 0 20rpx;
  }

  // padding-left: 10rpx;
  .header {
    color: #ffb612;
    display: flex;
    // justify-content: space-between;
    padding: 20rpx 10rpx;
    padding-top: 80rpx;
    align-items: center;
    background-color: #4f4f4f;

    .title {
      color: #ffb612;
      padding-left: 250rpx;
    }

    margin-bottom: 100rpx;
  }

  ::v-deep .uni-forms-item {
    padding: 10rpx 16rpx;
    align-items: center;
    position: relative;
    background-color: #4f4f4f;
    border-radius: 6px;

    &:last-child {
      padding: 0;
    }

    .uni-select__input-text {
      color: #ffb612 !important;
    }

    .uni-forms-item__label {
      color: #ffb612;
    }

    .uni-select__selector {
      background-color: #4f4f4f;
      color: #ffb612;
      border: unset;

      &:hover {
        // background-color: unset;
      }
    }

    .uni-popper__arrow {
      &::after {
        top: 0;
        border-bottom-color: #4f4f4f;
      }
    }

    .uni-select {
      border: unset;

      .uni-select__input-placeholder {
        color: #ffb612;
      }

      .uni-select__input-text {
        color: #fff;
      }
    }

    .content {
      display: none;
      position: absolute;
      background-color: #fff;
      z-index: 9;
      width: 100%;
      padding: 10rpx 0 10rpx 10rpx;

      .search-info {
        border-bottom: 1rpx solid #000;
        height: 25rpx;
      }
    }
  }
}

.submit {
  // display: flex;
  // justify-content: center;
  // line-height: 30rpx;
  // background-color: rgb(255, 182, 18);
  // color: #fff;
  // position: fixed;
  // bottom: 360rpx;
  // margin: 0 auto;
  // border-radius: 30rpx;
  // line-height: 30rpx;
  // align-items: center;
  // margin-left: 40rpx;

  .submit {
    border-radius: 30rpx;
  }

  .button {
    width: 100%;
    height: 90rpx;
    display: flex;
    margin-left: 30rpx;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    // line-height: 30rpx;
    background-color: rgb(255, 182, 18);
    // color: #fff;
    // position: fixed;
    // bottom: 20%;
    // margin: 0 auto;
    // top: 45%;
  }
}

.co {
  color: rgb(255, 182, 18);
}

.so {
  color: rgb(255, 182, 18);
}

.co {
  color: rgb(255, 182, 18);
}

.so {
  color: rgb(255, 182, 18);
}
</style>
